<template>
  <el-form v-model="ParameterForm" :label-position="'top'" label-width="80px">
    <el-form-item v-for="item in ParameterForm" :key="item.attr_id" :label="item.attr_name">
      <el-checkbox v-for="(item2,index) in item.attr_vals.split(',')" :key="index" checked :label="item2" border />
    </el-form-item>
  </el-form>
</template>

<script>
import { getShopListById } from '@/api/ClassifyList.js'
export default {
  name: 'ShopParameter',
  props: {
    shopsort: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      parameter: {
        id: 0, // 分类ID
        sel: 'many'
      },
      ParameterForm: []
    }
  },
  watch: {
    deep: true,
    shopsort: {
      immediate: true,
      handler: function() {
        this.loadShopListById()
      }
    }
  },

  created() {
  },
  methods: {
    async loadShopListById() {
      this.parameter.id = this.shopsort[2]
      const res = await getShopListById(this.parameter)
      console.log(res)
      this.ParameterForm = res.data
      const newArr = res.data.map(item => {
        return {
          attr_id: item.attr_id,
          attr_vals: item.attr_vals
        }
      })
      this.$emit('AddForm', newArr)
    }
  }
}
</script>

<style scoped lang='scss'>
::v-deep .el-checkbox{
  margin-left: 0;
}
</style>
